﻿@{
    ViewBag.Title = "Index";
}

@model List<MVVM.Controllers.Product>
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/knockout-2.1.0.js"></script>
<script src="~/Scripts/jquery-plugin-boxy/js/jquery.boxy.js"></script>
<link href="~/Scripts/jquery-plugin-boxy/css/boxy.css" rel="stylesheet" />

@Html.Partial("_BoxPartial")
<h3>
    <a href="javascript:void(0)" data-bind="click:add">添加实体</a>
    <a href="javascript:void(0)" data-bind="click:delMore">删除列表</a>

</h3>
<table>
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind="template:{name:'list',foreach: PeopleList}">
    </tbody>
</table>
<script type="text/html" id="list">
    <tr>
        <td><span data-bind="text:ID"></span></td>
        <td><span data-bind="text:Name"></span>
        </td>
        <td><a href="javascript:void(0)" data-bind="click:$parent.remove">删除</a>
            <a href="javascript:void(0)" data-bind="click:$parent.edit">编辑</a>
            <input type="checkbox" data-bind="value:ID" />
        </td>
    </tr>
</script>
<fieldset data-bind="with:selectItem,visible:editing">
    <legend>正在<span data-bind="if:ID==0">新建</span><span data-bind="if:ID>0">编辑</span></legend>
    姓名：
    <input type="text" data-bind="value:Name" />
    <input type="button" data-bind="click:$parent.save" value="保存" />
    <input type="button" data-bind="click:$parent.cancle" value="取消" />
</fieldset>
<a href="javascript:void(0)" onclick="a0()">dialogBox</a>
<a href="javascript:void(0)" onclick="a1()">alertBox</a>
<a href="javascript:void(0)" onclick="a2()">confirmBox</a>
<a href="javascript:void(0)" onclick="alerttest()">alert</a>
<a href="javascript:void(0)" onclick="confirmtest()">confirm</a>

<script type="text/ecmascript">
    function a0() {
        dialogBox("您有1个消息，请注意查收！");
    }
    function a1() {
        alertBox("您有1个消息，请注意查收！");
    }

    function a2() {
        confirmBox("您有2个消息，请注意查收！", function () { alertBox("收吧") });
    }
    function alerttest() {
        alert("ok");
    }
    function confirmtest() {
        confirm("are you sure!", function () { alert("删除成功") });
    }
    var People = function () {
        //这里用self会影响到model方法里的self
        var self = this;
        self.ID = 0;
        self.Name = "";
    }

    var model = function () {
        var self = this;
        self.PeopleList = ko.observableArray(@Html.Raw(Json.Encode(Model)));
        self.remove = function (o) { self.PeopleList.remove(o); };
        self.selectItem = ko.observable();
        self.editing = ko.observable(false);

        self.add = function (o) {
            self.editing(true);
            self.selectItem(new People());
        }

        self.edit = function (o) {
            self.editing(true);
            self.selectItem(o);
        }

        self.selectItem.subscribe(function (o) {
            alert("要编辑记录ID是" + o.ID);
        });

        self.save = function (o) {
            alert((o.ID > 0 ? "修改数据" : "新建数据") + o.Name);
        }

        self.cancle = function () {
            self.editing(false);
        }

        self.delMore = function () {
            var selValue = '';
            var arr = $('input[type=checkbox]:checked');
            if (arr == 0)
                alert("请选择至少一项");

            for (var i = 0; i < arr.length; i++)
                selValue += arr[i].value + ",";

            alert("删除这些记录[" + selValue + "]");
        }
    }
    //扩展方法
    model.prototype.alert2 = function (msg) {
        alert("重写model的alert方法：" + msg);
    }

    var MyModel = new model();
    // MyModel.alert2("OK");
    ko.applyBindings(MyModel);



    //$.when($.ajax({
    //    url: "/home/getProduct",
    //    dataType: "JSON",
    //    type: "GET",
    //    success: function (data) {
    //        alert(JSON.stringify(data));
    //    }
    //})).done(function () { alert("哈哈，回调成功了！"); })
    //   .done(function () { ko.applyBindings(new model()); });
</script>
